<template>
    <div class="load_component">
        <div class="petal" v-for="index in sum" :style="`transform: rotate(${-60+index*360/sum}deg)`"></div>
        <div class="flowerCore"></div>
        <div class="loading_text">loading<span>...</span></div>
        <div class="process_text"><div class="span">{{ loading }}</div> % </div>
    </div>
</template>
<script setup name="loading">
import { computed, ref, watch } from "vue";
let sum = ref(6);
let props = defineProps(["process"]);
let loading = computed(()=>{
    return props["process"]
})
</script>

<style scoped lang="less">
.load_component{
    position: relative;
    width: 60px;
    height: 60px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .flowerCore{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 12px;
        height: 12px;
        background-color: yellow;
        border-radius: 50%;
    }
    .petal{
        position: absolute;
        width:30px;
        height: 30px;
        background-color: rgb(255, 129, 129);
        border-radius:0 100% 0 100%;
        border:1px solid  rgb(243, 243, 243);
        box-shadow:0 0 150px white;
        transform-origin: 30px 30px;
        transform: rotate(0deg);
        animation:petalshow 1s forwards;
    }
    .loading_text{
        position: absolute;
        bottom: -40px;
        text-align: center;
    }
    .process_text{
        position: absolute;
        bottom: -70px;
        text-align: center;
        .span{
            display: inline-block;
            width: 30px;
        }
    }
}
</style>